<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/detail.css"/>
</head>
<body>
<!--段雨薇详情页面的整体布局-->
<div id="container">
    <div id="header">
        <!-- 辅助导航-->
        <div id="barTop">
            <div>
                <div id="wel"><p>welcome to little bag!</p></div>
                <div id="rightL">
                    <div id="user">
                        <span>请登录</span>
                        <span>|</span>
                        <span>快速注册</span>
                    </div>
                    <div id="cart">
                        <span>购物车</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 导航条-->
        <ul id="nav">
            <li><a href="index.html">首页</a></li>
            <li><a href="#">本季新品</a></li>
            <li><a href="index.html"><img src="images/logo.jpg" alt="这是本网站的Logo"/></a></li>
            <li><a href="#">经典系列</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
    <div id="content">
        <!-- 整体介绍页面-->
        <div id="leftContent">
            <div>
                <h3><%=data.title%></h3>
                <hr/>
                <!-- 购买引导-->
                <div id="buy">
                    <p>¥<%=data.YuanPrice%></p>
                    <input type="button" value="立即购买"/>
                </div>
                <!-- 收藏引导-->
                <div id="add">
                    <input type="button" value="&nbsp;&nbsp;&nbsp;&nbsp;收藏" id="collect"/><!-- 添加星标-->
                    <input type="button"  data-rule="<%=data.rule_id%>" data-id="<%=data.Id%>" value="添加至我的购物车" id="buyCart"/>
                </div>
                <span>&#xe616;</span>
                <hr/>
                <ul id="detailS">
                    <li><span>&#xe60e;</span>详细特征</li><!-- 添加向下按钮-->
                    <li>23.0 x 18.0 x 8.0 cm<br/>(长 x 高 x 宽)</li>
                    <li>- 加衬小羊皮</li>
                    <li>- 金银双色并搭配粉色金属件</li>
                    <li>- 绵羊皮内衬</li>
                    <!--<li>- 可拆卸的皮革肩带</li>-->
                    <li>- 标志性的TWIST铰链式雕刻D型环</li>
                    <li>- 带有Twist金属签名字样的行李牌</li>
                    <!--<li>- 双拉链设计，并配有挂锁</li>-->
                    <!--<li>- 2个内袋</li>-->
                    <!--<li>- 包底有四枚保护钉</li>-->
                </ul>
            </div>
        </div>
        <!-- 女包细节介绍 <img src="images/detailBG.jpg" alt="这是详情页的背景"/>-->
        <div id="rightContent">
            <!--<div></div>-->
            <div id="topBag">
                <ul>
                    <li>
                        <div><img src="images/detail1.png" alt=""/></div>
                        <div>
                           <%-data.summary%>
                        </div>
                    </li>
                    <li>
                        <div><img src="images/detail2.png" alt=""/></div>
                        <div>
                            <p>缝制罗马皮革提手、细节<br/>
                            和肩带。独特的可调节肩<br/>
                            带搭配金属挂环，亦可<br/>
                            作为斜挎包带使用。</p>
                        </div>
                    </li>
                    <li>
                        <div>
                            <p>两侧饰有拉链。镀钯及红色<br/>
                                缎面金属浮雕装饰细节。尼龙<br/>
                                挂绳可连接到<br/>
                                手提包和手提箱上，可缠绕戴于<br/>
                                手腕上或卸下。</p>
                        </div>
                        <div><img src="images/detail2-13.png" alt=""/></div>
                    </li>
                    <li>
                        <div><img src="images/detail4.png" alt=""/></div>
                        <div>
                            <p>贴花和粉色皮草。挂绳可将配<br/>
                                饰连接到手提包</p>
                        </div>
                    </li>
                    <li>
                        <div><img src="images/detail15.png" alt=""/></div>
                        <div>
                            <p>提手和可调节可拆卸肩带。<br/>
                                意大利手工制造</p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div id="footer">
        <hr/>
        <!-- 购买细节-->
        <div id="service">
            <ul id="serDet">
                <li><h4>服务保障</h4>
                    <p><a href="#">品牌真品防伪码</a></p>
                    <p><a href="#">正品保证</a></p>
                    <p><a href="#">30天无条件退货</a></p>
                    <p><a href="#">7×24小时客服服务</a></p>
                </li>
                <li>
                    <h4>使用帮助</h4>
                    <p><a href="#">新手指南</a></p>
                    <p><a href="#">常见问题</a></p>
                    <p><a href="#">帮助中心</a></p>
                    <p><a href="#">用户协议</a></p>
                    <p><a href="#">企业用户团购</a></p>
                </li>
                <li>
                    <h4>支付方式</h4>
                    <p><a href="#">货到付款</a></p>
                    <p><a href="#">在线支付</a></p>
                    <p><a href="#">余额支付</a></p>
                    <p><a href="#">现金券支付</a></p>
                </li>
                <li>
                    <h4>配送方式</h4>
                    <p><a href="#">包邮政策</a></p>
                    <p><a href="#">配送说明</a></p>
                    <p><a href="#">运费说明</a></p>
                    <p><a href="#">验货签收</a></p>
                </li>
                <li>
                    <h4>售后服务</h4>
                    <p><a href="#">正品承诺</a></p>
                    <p><a href="#">售后咨询</a></p>
                    <p><a href="#">退货政策</a></p>
                    <p><a href="#">退货办理</a></p>
                </li>
            </ul>
            <ul id="appE">
                <li><div id="phoneA"><img src="images/photoApp.jpg" alt=""/></div><p>下载手机客户端</p></li>
                <li><div id="weiA"><img src="images/weiApp.jpg" alt=""/></div><p>LITTLE BAG官方微信</p></li>
            </ul>
        </div>
        <!--版权-->
        <div id="copyright">
            <p>COPYRIGHT © 2010-2015 北京创锐文化传媒有限公司 LITTLEBAG.COM 保留一切权利。 客服热线：400-123-8888</p>
        </div>
        <div id="backUp">&#xe62b;</div>
    </div>
</div>
<script src="js/jquery.3.4.0.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="js/detail.js"></script>
<script>
    $('#buyCart').click(function () {
      let id = $(this).attr('data-id')
      let ruleId = $(this).attr('data-rule')
      let userId = 1
        // 这里判断是否登录
        $.ajax({
            url:'/addShopCart',
            method:'post',
            data:{id,ruleId,userId},
            success(data){
                console.log(data)
            }
        })
    })
</script>
</body>
</html>